<template>
  <view class="container">
    <!-- 状态筛选 -->
    <view class="status-filter">
      <scroll-view scroll-x="true" class="filter-scroll">
        <view class="filter-list">
          <view class="filter-item" :class="{ active: selectedStatus === '' }" @click="selectStatus('')">
            全部
          </view>
          <view v-for="status in statusOptions" :key="status.value" class="filter-item"
            :class="{ active: selectedStatus === status.value }" @click="selectStatus(status.value)">
            {{ status.label }}
          </view>
        </view>
      </scroll-view>
    </view>

    <!-- 搜索栏 -->
    <view class="search-bar">
      <uni-search-bar v-model="searchKeyword" placeholder="搜索订单号或商品名称" @confirm="handleSearch"
        @input="handleSearchInput" @clear="handleClearSearch" :focus="false" :show-action="true" action-text="搜索"
        @action="handleSearch" bg-color="#f5f5f5" />
    </view>

    <!-- 订单列表 -->
    <view class="order-list">
      <view v-for="order in orders" :key="order.id" class="order-item" @click="goToDetail(order.id)">
        <view class="order-header">
          <view class="order-info">
            <view class="order-no">订单号: {{ safeGetOrderData(order, 'orderNumber', '未知订单号') }}</view>
            <view class="order-time">{{ formatTime(safeGetOrderData(order, 'createdAt')) }}</view>
          </view>
          <view class="order-status" :class="[getStatusClass(safeGetOrderData(order, 'status'))]">
            {{ safeGetOrderData(order, 'statusText', '未知状态') }}
          </view>
        </view>

        <view class="order-content">
          <view class="order-items">
            <view v-for="item in safeGetOrderData(order, 'items', [])"
              :key="safeGetOrderData(item, 'id', Math.random())" class="item-row">
              <image :src="safeGetOrderData(item, 'product.imageUrl', '/static/icons/default-product.png')"
                mode="aspectFill" class="item-image" />
              <view class="item-info">
                <view class="item-name">{{ safeGetOrderData(item, 'productName', '未知商品') }}</view>
                <view class="item-details">
                  <text class="item-price">{{ safeGetOrderData(item, 'unitPoints', 0) }}积分</text>
                  <text class="item-quantity">x{{ safeGetOrderData(item, 'quantity', 0) }}</text>
                </view>
              </view>
            </view>
          </view>

          <view class="order-summary">
            <view class="summary-row">
              <text class="summary-label">商品数量:</text>
              <text class="summary-value">{{ safeGetOrderData(order, 'totalQuantity', 0) }}</text>
            </view>
            <view class="summary-row">
              <text class="summary-label">订单类型:</text>
              <text class="summary-value">{{ safeGetOrderData(order, 'typeText', '未知类型') }}</text>
            </view>
            <view v-if="safeGetOrderData(order, 'reservationCode')" class="summary-row">
              <text class="summary-label">预约码:</text>
              <text class="summary-value reservation-code">{{ safeGetOrderData(order, 'reservationCode') }}</text>
            </view>
            <view class="summary-row total">
              <text class="summary-label">总计:</text>
              <text class="summary-value total-points">{{ safeGetOrderData(order, 'totalPoints', 0) }}积分</text>
            </view>
          </view>
        </view>

        <view class="order-actions">
          <button v-if="['pending', 'confirmed'].includes(safeGetOrderData(order, 'status'))"
            class="action-btn cancel-btn" @click.stop="cancelOrder(order)">
            取消订单
          </button>

          <button v-if="safeGetOrderData(order, 'reservationCode')" class="action-btn copy-btn"
            @click.stop="copyReservationCode(safeGetOrderData(order, 'reservationCode'))">
            复制预约码
          </button>
          <button class="action-btn detail-btn" @click.stop="goToDetail(safeGetOrderData(order, 'id'))">
            查看详情
          </button>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view v-if="hasMore" class="load-more" @click="loadMore">
      <text v-if="!loading">加载更多</text>
      <text v-else>加载中...</text>
    </view>

    <!-- 错误状态 -->
    <view v-if="error && !loading" class="error-state">
      <image src="/static/icons/error.png" class="error-icon" />
      <text class="error-text">{{ error }}</text>
      <button class="btn btn-retry" @click="retryLoad">
        重试
      </button>
    </view>

    <!-- 空状态 -->
    <view v-if="!loading && !error && orders.length === 0" class="empty-state">
      <image src="/static/icons/empty.png" class="empty-icon" />
      <text class="empty-text">暂无订单记录</text>
      <button class="btn btn-primary" @click="goToProducts">
        去兑换商品
      </button>
    </view>

    <!-- 加载中 -->
    <view v-if="loading && orders.length === 0" class="loading-state">
      <uni-load-more status="loading" />
    </view>
  </view>
</template>

<script>
import { getOrders, cancelOrder, getOrderStatistics } from '@/api/orders'

// 简化的工具函数
const formatOrderForDisplay = (order) => {
  if (!order) return {}
  return {
    ...order,
    orderNumber: order.orderNumber || order.order_number || '未知订单号',
    statusText: getOrderStatusText(order.status),
    totalPoints: order.totalPoints || order.total_points || 0,
    items: order.items || []
  }
}

const formatOrderTime = (time, format = 'relative') => {
  if (!time) return '未知时间'
  const date = new Date(time)
  if (format === 'relative') {
    const now = new Date()
    const diff = now - date
    const days = Math.floor(diff / (1000 * 60 * 60 * 24))
    if (days === 0) return '今天'
    if (days === 1) return '昨天'
    return `${days}天前`
  }
  return date.toLocaleString()
}

const getOrderStatusText = (status) => {
  const statusMap = {
    'pending': '待处理',
    'confirmed': '已确认',
    'processing': '处理中',
    'printing': '打印中',
    'completed': '已完成',
    'cancelled': '已取消'
  }
  return statusMap[status] || status || '未知状态'
}

const getOrderStatusClass = (status) => {
  return `status-${status}`
}

const safeGetOrderData = (order, field, defaultValue = '') => {
  if (!order) return defaultValue
  const fields = field.split('.')
  let value = order
  for (const f of fields) {
    if (value && typeof value === 'object' && f in value) {
      value = value[f]
    } else {
      return defaultValue
    }
  }
  return value !== null && value !== undefined ? value : defaultValue
}

// 简化的更新函数
const simpleUpdate = async (component, data) => {
  if (!component._isComponentActive) return
  Object.assign(component, data)
}

export default {
  name: 'OrdersListPage',
  data() {
    return {
      orders: [],
      statistics: null,
      searchKeyword: '',
      selectedStatus: '',
      loading: false,
      hasMore: true,
      page: 1,
      limit: 20,
      statusOptions: [
        { value: 'pending', label: '待处理' },
        { value: 'confirmed', label: '待确认' },
        { value: 'processing', label: '处理中' },
        { value: 'printing', label: '打印中' },
        { value: 'completed', label: '已完成' },
        { value: 'cancelled', label: '已取消' }
      ],
      // 组件状态管理
      _componentId: null,
      _isComponentActive: true,
      _needRefreshAfterCancel: false,
      // 搜索相关
      searchTimer: null,
      // 错误状态
      error: null,
      retryCount: 0,
      maxRetries: 3
    }
  },

  onLoad(options) {
    console.log('=== 订单列表页面 onLoad 被调用 ===', options)

    // 简化组件注册，避免复杂的生命周期管理
    try {
      this._componentId = `orders_list_${Date.now()}`
      this._isComponentActive = true
      console.log('订单列表页面组件已注册:', this._componentId)
    } catch (error) {
      console.error('注册组件失败:', error)
    }

    // 处理页面参数
    if (options && options.status) {
      this.selectedStatus = options.status
      console.log('设置订单状态筛选:', options.status)
    }

    // 延迟加载数据，确保页面完全初始化
    console.log('准备加载数据...')
    this.$nextTick(() => {
      setTimeout(() => {
        console.log('开始初始化加载数据...')
        this.loadOrders(true)
        this.loadStatistics()
      }, 100)
    })
  },

  onReady() {
    console.log('=== 订单列表页面 onReady 被调用 ===')
    // 如果onLoad中的数据加载失败，在这里再次尝试
    if (this.orders.length === 0 && !this.loading) {
      console.log('页面就绪时发现数据为空，重新加载')
      this.loadOrders(true)
    }
  },

  onShow() {
    console.log('=== 订单列表页面 onShow 被调用 ===')
    // 标记组件为活跃状态
    this._isComponentActive = true

    // 每次显示页面时都刷新数据，确保数据是最新的
    console.log('页面显示，刷新订单数据')

    // 使用 nextTick 确保页面完全显示后再刷新数据
    this.$nextTick(() => {
      setTimeout(() => {
        console.log('延迟刷新订单数据')
        this.refreshData()
      }, 100)
    })
  },

  onHide() {
    console.log('=== 订单列表页面 onHide 被调用 ===')
    // 标记组件为非活跃状态
    this._isComponentActive = false
  },

  onUnload() {
    console.log('=== 订单列表页面 onUnload 被调用 ===')
    // 组件销毁时清理
    this._isComponentActive = false

    // 清理搜索定时器
    if (this.searchTimer) {
      clearTimeout(this.searchTimer)
      this.searchTimer = null
    }
  },

  onPullDownRefresh() {
    this.refreshData()
  },

  onReachBottom() {
    if (this.hasMore && !this.loading) {
      this.loadMore()
    }
  },

  methods: {
    // 加载订单列表
    async loadOrders(reset = false) {
      if (this.loading || !this._isComponentActive) return

      try {
        console.log('开始加载订单列表，参数:', { reset, selectedStatus: this.selectedStatus, page: this.page })

        await simpleUpdate(this, { loading: true, error: null })

        const params = {
          page: reset ? 1 : this.page,
          limit: this.limit,
          status: this.selectedStatus || undefined,
          search: this.searchKeyword || undefined
        }

        console.log('订单列表API请求参数:', params)

        // 调用真实API获取订单列表
        const response = await getOrders(params)
        console.log('订单列表API响应:', response)

        if (response && response.success && this._isComponentActive) {
          let newOrders = response.data?.orders || []
          console.log('获取到的订单数据:', newOrders)

          // 使用安全包装器格式化订单数据
          newOrders = newOrders.map(order => formatOrderForDisplay(order))

          const updateData = {}

          if (reset) {
            updateData.orders = newOrders
            updateData.page = 2 // 下次加载第2页
          } else {
            updateData.orders = [...this.orders, ...newOrders]
            updateData.page = this.page + 1
          }

          updateData.hasMore = response.data?.pagination ?
            (response.data.pagination.current < response.data.pagination.total) :
            (newOrders.length >= this.limit)
          updateData.retryCount = 0

          console.log('更新数据:', updateData)
          await simpleUpdate(this, updateData)
        } else {
          throw new Error(response?.message || '获取订单列表失败')
        }
      } catch (error) {
        console.error('加载订单列表失败:', error)

        if (this._isComponentActive) {
          await simpleUpdate(this, {
            error: error.message || '加载失败',
            retryCount: this.retryCount + 1
          })

          // 显示错误提示
          uni.showToast({
            title: error.message || '加载失败',
            icon: 'none'
          })
        }

        // 简化错误记录
        console.error('订单列表加载错误详情:', {
          message: error.message,
          retryCount: this.retryCount,
          timestamp: new Date().toISOString()
        })
      } finally {
        if (this._isComponentActive) {
          await simpleUpdate(this, { loading: false })

          if (reset) {
            uni.stopPullDownRefresh()
          }
        }
      }
    },

    // 加载统计信息
    async loadStatistics() {
      if (!this._isComponentActive) return

      try {
        const response = await getOrderStatistics()
        if (response.success && this._isComponentActive) {
          await simpleUpdate(this, { statistics: response.data })
        }
      } catch (error) {
        console.error('加载统计信息失败:', error)

        // 简化错误记录
        console.error('订单统计加载错误:', error.message)
      }
    },

    // 刷新数据
    refreshData() {
      console.log('=== 开始刷新数据 ===')
      console.log('当前loading状态:', this.loading)
      console.log('当前组件活跃状态:', this._isComponentActive)

      // 确保组件处于活跃状态
      this._isComponentActive = true

      // 重置loading状态，确保可以重新加载
      this.loading = false

      // 重置分页状态
      this.page = 1
      this.hasMore = true
      this.error = null

      console.log('开始加载订单数据')

      // 使用 nextTick 确保状态已更新
      this.$nextTick(() => {
        console.log('nextTick 中加载订单数据')
        this.loadOrders(true)
        this.loadStatistics()
      })
    },

    // 加载更多
    loadMore() {
      this.loadOrders()
    },

    // 搜索订单
    handleSearch() {
      console.log('执行搜索，关键词:', this.searchKeyword)
      // 重置分页
      this.page = 1
      this.hasMore = true
      this.loadOrders(true)
    },

    // 搜索输入处理（实时搜索）
    handleSearchInput(value) {
      console.log('搜索输入变化:', value)
      this.searchKeyword = value

      // 清除之前的搜索定时器
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
      }

      // 延迟搜索，避免频繁请求
      this.searchTimer = setTimeout(() => {
        if (this.searchKeyword.trim() !== '') {
          console.log('执行延迟搜索')
          this.handleSearch()
        }
      }, 800) // 800ms 延迟
    },

    // 清除搜索
    handleClearSearch() {
      console.log('清除搜索')
      this.searchKeyword = ''

      // 清除搜索定时器
      if (this.searchTimer) {
        clearTimeout(this.searchTimer)
        this.searchTimer = null
      }

      // 重置分页并重新加载
      this.page = 1
      this.hasMore = true
      this.loadOrders(true)
    },

    // 选择状态
    async selectStatus(status) {
      console.log('选择订单状态:', status)
      this.selectedStatus = status
      // 重置分页
      this.page = 1
      this.hasMore = true
      await this.loadOrders(true)
    },

    // 取消订单
    async cancelOrder(order) {
      console.log('=== 开始取消订单流程 ===')
      console.log('订单数据:', order)

      // 验证订单数据
      if (!order || !order.id) {
        console.error('订单数据无效:', order)
        uni.showToast({
          title: '订单信息错误',
          icon: 'none'
        })
        return
      }

      // 检查订单状态
      const orderStatus = this.safeGetOrderData(order, 'status')
      console.log('订单状态:', orderStatus)

      if (!['pending', 'confirmed'].includes(orderStatus)) {
        console.error('订单状态不允许取消:', orderStatus)
        uni.showToast({
          title: '当前订单状态不允许取消',
          icon: 'none'
        })
        return
      }

      // 防止重复操作
      if (this.loading) {
        console.log('正在处理中，忽略重复操作')
        return
      }

      try {
        // 使用 Promise 方式处理 showModal
        const isConfirmed = await new Promise((resolve) => {
          uni.showModal({
            title: '确认取消',
            content: '确定要取消这个订单吗？取消后积分将退还到您的账户。',
            confirmText: '确认取消',
            cancelText: '我再想想',
            success: (res) => {
              console.log('showModal success 回调:', res)
              resolve(res.confirm === true)
            },
            fail: () => {
              console.log('showModal fail 回调')
              resolve(false)
            }
          })
        })

        if (!isConfirmed) {
          console.log('用户取消了操作')
          return
        }

        console.log('用户确认取消订单')
        this.loading = true
        uni.showLoading({ title: '取消中...' })

        console.log('调用取消订单API，订单ID:', order.id)
        const response = await cancelOrder(order.id, '用户主动取消')
        console.log('取消订单API响应:', response)

        if (response && response.success) {
          console.log('订单取消成功')
          uni.showToast({
            title: '订单已取消',
            icon: 'success'
          })

          // 标记需要刷新数据
          this._needRefreshAfterCancel = true
        } else {
          const errorMsg = response?.message || '取消订单失败'
          console.error('取消订单失败:', errorMsg)
          throw new Error(errorMsg)
        }
      } catch (error) {
        console.error('取消订单异常:', error)
        uni.showToast({
          title: error.message || '取消失败',
          icon: 'none'
        })
      } finally {
        this.loading = false
        uni.hideLoading()

        // 如果取消成功，刷新数据
        if (this._needRefreshAfterCancel) {
          this._needRefreshAfterCancel = false
          console.log('取消订单成功，开始刷新数据')

          // 延迟刷新，确保loading状态已重置
          setTimeout(() => {
            console.log('执行延迟刷新')
            this.refreshData()
          }, 200)
        }

        console.log('=== 取消订单流程结束 ===')
      }
    },

    // 复制预约码
    copyReservationCode(code) {
      uni.setClipboardData({
        data: code,
        success: () => {
          uni.showToast({
            title: '预约码已复制',
            icon: 'success'
          })
        }
      })
    },

    // 跳转到订单详情
    goToDetail(orderId) {
      uni.navigateTo({
        url: `/pages/orders/detail?id=${orderId}`
      })
    },

    // 跳转到商品列表
    goToProducts() {
      uni.switchTab({
        url: '/pages/products/list'
      })
    },

    // 获取状态文本
    getStatusText(status) {
      return getOrderStatusText(status)
    },

    // 获取状态样式类
    getStatusClass(status) {
      return getOrderStatusClass(status)
    },

    // 安全获取订单数据
    safeGetOrderData(order, field, defaultValue = '') {
      return safeGetOrderData(order, field, defaultValue)
    },

    // 获取订单类型文本
    getOrderTypeText(type) {
      const typeMap = {
        'offline': '到店兑换',
        'online': '在线处理'
      }
      return typeMap[type] || type
    },

    // 格式化时间
    formatTime(time) {
      return formatOrderTime(time, 'relative')
    },

    // 重试加载
    retryLoad() {
      if (this.retryCount < this.maxRetries) {
        this.loadOrders(true)
      } else {
        uni.showModal({
          title: '加载失败',
          content: '多次尝试加载失败，请检查网络连接后重试',
          showCancel: false
        })
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  background-color: #f5f5f5;
  min-height: 100vh;
}

.status-filter {
  background-color: #fff;
  padding: 20rpx 0;
  margin-bottom: 20rpx;
}

.filter-scroll {
  white-space: nowrap;
}

.filter-list {
  display: flex;
  padding: 0 20rpx;
}

.filter-item {
  flex-shrink: 0;
  padding: 12rpx 24rpx;
  margin-right: 20rpx;
  background-color: #f0f0f0;
  border-radius: 20rpx;
  font-size: 28rpx;
  color: #666;

  &.active {
    background-color: #007aff;
    color: #fff;
  }
}

.search-bar {
  background-color: #fff;
  padding: 20rpx;
  margin-bottom: 20rpx;
}

.order-list {
  padding: 0 20rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 16rpx;
  padding: 32rpx;
  margin-bottom: 24rpx;
  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #f0f0f0;
  transition: all 0.3s ease;


}

.order-item:active {
  transform: scale(0.98);
  box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.12);
}

.order-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 24rpx;
  padding-bottom: 16rpx;
  border-bottom: 1rpx solid #f5f5f5;
}

.order-no {
  font-size: 30rpx;
  font-weight: 600;
  color: #1a1a1a;
  margin-bottom: 8rpx;
  letter-spacing: 0.5rpx;
}

.order-time {
  font-size: 24rpx;
  color: #8a8a8a;
}

.order-status {
  padding: 10rpx 20rpx;
  border-radius: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  letter-spacing: 0.5rpx;

  &.status-pending {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
    border: 1rpx solid #ffeaa7;
  }

  &.status-confirmed {
    background: linear-gradient(135deg, #e3f2fd, #bbdefb);
    color: #1565c0;
    border: 1rpx solid #bbdefb;
  }

  &.status-processing {
    background: linear-gradient(135deg, #f3e5f5, #e1bee7);
    color: #7b1fa2;
    border: 1rpx solid #e1bee7;
  }

  &.status-printing {
    background: linear-gradient(135deg, #fff3e0, #ffcc02);
    color: #ef6c00;
    border: 1rpx solid #ffcc02;
  }

  &.status-completed {
    background: linear-gradient(135deg, #e8f5e8, #c8e6c9);
    color: #2e7d32;
    border: 1rpx solid #c8e6c9;
  }

  &.status-cancelled {
    background: linear-gradient(135deg, #ffebee, #ffcdd2);
    color: #c62828;
    border: 1rpx solid #ffcdd2;
  }
}

.order-content {
  margin-bottom: 20rpx;
}

.order-items {
  margin-bottom: 20rpx;
}

.item-row {
  display: flex;
  align-items: center;
  margin-bottom: 16rpx;
}

.item-row:last-child {
  margin-bottom: 0;
}

.item-image {
  width: 80rpx;
  height: 80rpx;
  border-radius: 8rpx;
  margin-right: 16rpx;
}

.item-info {
  flex: 1;
}

.item-name {
  font-size: 26rpx;
  color: #333;
  margin-bottom: 8rpx;
}

.item-details {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.item-price {
  font-size: 24rpx;
  color: #ff4757;
}

.item-quantity {
  font-size: 24rpx;
  color: #666;
}

.order-summary {
  border-top: 1rpx solid #f0f0f0;
  padding-top: 16rpx;
}

.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8rpx;
}

.summary-row:last-child {
  margin-bottom: 0;
}

.summary-row.total {
  font-weight: bold;
  border-top: 1rpx solid #f0f0f0;
  padding-top: 8rpx;
  margin-top: 8rpx;
}

.summary-label {
  font-size: 26rpx;
  color: #666;
}

.summary-value {
  font-size: 26rpx;
  color: #333;
}

.reservation-code {
  color: #007aff;
  font-weight: bold;
}

.total-points {
  color: #ff4757;
  font-weight: bold;
}

.order-actions {
  display: flex;
  gap: 16rpx;
  justify-content: flex-end;
}

.action-btn {
  padding: 16rpx 28rpx;
  border-radius: 24rpx;
  font-size: 24rpx;
  font-weight: 500;
  border: none;
  transition: all 0.2s ease;
  min-width: 120rpx;
  text-align: center;
}

.action-btn:active {
  transform: scale(0.95);
}

.cancel-btn {
  background: linear-gradient(135deg, #f5f5f5, #e8e8e8);
  color: #666;
  border: 1rpx solid #ddd;
}

.cancel-btn:active {
  background: linear-gradient(135deg, #e8e8e8, #ddd);
}

.copy-btn {
  background: linear-gradient(135deg, #e3f2fd, #bbdefb);
  color: #1976d2;
  border: 1rpx solid #bbdefb;
}

.copy-btn:active {
  background: linear-gradient(135deg, #bbdefb, #90caf9);
}

.detail-btn {
  background: linear-gradient(135deg, #007aff, #0056cc);
  color: #fff;
  box-shadow: 0 2rpx 8rpx rgba(0, 122, 255, 0.3);
}

.detail-btn:active {
  background: linear-gradient(135deg, #0056cc, #004499);
  box-shadow: 0 1rpx 4rpx rgba(0, 122, 255, 0.4);
}

.load-more {
  text-align: center;
  padding: 40rpx;
  font-size: 28rpx;
  color: #666;
}

.error-state {
  text-align: center;
  padding: 100rpx 40rpx;
}

.error-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.error-text {
  font-size: 28rpx;
  color: #ff4757;
  margin-bottom: 40rpx;
}

.empty-state {
  text-align: center;
  padding: 100rpx 40rpx;
}

.empty-icon {
  width: 120rpx;
  height: 120rpx;
  margin-bottom: 20rpx;
}

.empty-text {
  font-size: 28rpx;
  color: #999;
  margin-bottom: 40rpx;
}

.btn {
  padding: 16rpx 32rpx;
  border-radius: 24rpx;
  font-size: 28rpx;
  border: none;
}

.btn-primary {
  background-color: #007aff;
  color: #fff;
}

.btn-retry {
  background-color: #ff6b6b;
  color: #fff;
}

.loading-state {
  padding: 100rpx 40rpx;
}

.statistics-section {
  background-color: #fff;
  margin: 20rpx;
  border-radius: 12rpx;
  padding: 30rpx;
}

.section-title {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20rpx;
}

.stat-item {
  text-align: center;
}

.stat-value {
  font-size: 32rpx;
  font-weight: bold;
  color: #007aff;
  margin-bottom: 8rpx;
}

.stat-label {
  font-size: 24rpx;
  color: #666;
}
</style>